<template>
  <el-container class="mailContainer">
    <el-aside style="float: left;width: 300px;">
      <!-- 头部操作按钮 -->
      <el-card class="box-card el-card-flex">
        <div slot="header" class="clearfix">
          <el-input clearable v-model="searchValue"  placeholder="请输入姓名、机构" suffix-icon="el-icon-search"></el-input>
        </div>
        <div class="text item el-over-auto" v-show="treeShow">
          <el-tree
            :data="employeesTree"
            v-show="searchValue"
            default-expand-all
            :highlight-current="true"
            :default-expanded-keys="treeExpandedKey"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="orgId"
            :props="defaultProps"
            :load="loadMailNode"
            @node-click="handleNodeClick"
          >
          </el-tree>
          <el-tree
            v-show="searchValue==''"
            :highlight-current="true"
            :default-expanded-keys="treeExpandedKey"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="orgId"
            :props="defaultProps"
            :load="loadMailNode"
            @node-click="handleNodeClick"
            :key="keyTree"
            lazy
          >
          </el-tree>
        </div>
        <div class="text item el-over-auto" v-show="peopleShow">
          <!-- <ul>
            <li v-for="(v, i) in employeesPeople" :key="i">{{v.empName}}</li>
          </ul> -->
          <ul class="text mid-panel">
              <li class="el-box panel" v-for="(val, index) in employeesPeople" :key="index" :class='isFalse === index?classA:""' @click="activePsn(index, val)">
                <div class="user-avatar">{{val.empName}}</div>
                <div class="listRightPart">
                  <span class="name">{{val.empName}}/{{val.empCode}}</span>
                  <!-- <span class="dept">{{val.phone}}</span> -->
                  <span class="dept" v-for="(v, i) in val.positions" :key="i">{{v.posiName}}</span>
                </div>
              </li>
            </ul>
        </div>
      </el-card>
    </el-aside>
    <el-main class="el-box mainCont" style="padding: 0 0 0 10px;">
      <transition name="slide-fade">
        <el-aside class="contacts-right-mid narrow asidePeople" style="width: 260px;" v-show="employees">
          <el-card class="box-card el-card-flex">
            <div slot="header" class="clearfix">
              <span :title="this.orgNames" class="orgNamesStyle">{{this.orgNames}}</span>
              <!-- <el-button type="text" :title="this.orgNames" class="orgNamesStyle">{{this.orgNames}}</el-button> -->
            </div>
            <ul class="text mid-panel" v-infinite-scroll="load" style="width: 280px;min-height: 100%;overflow: auto" :infinite-scroll-disabled="!canEasyLoad" infinite-scroll-distance="30" v-show="peopleContList">
              <li class="el-box panel" v-for="(val, index) in employeesData" :key="index" :class='isFalse === index?classA:""' @click="activePsn(index, val)">
                <div class="user-avatar">{{val.empName}}</div>
                <div class="listRightPart">
                  <span class="name">{{val.empName}}/{{val.empCode}}</span>
                  <!-- <span class="dept">{{val.phone}}</span> -->
                  <span class="dept" v-for="(v, i) in val.positions" :key="i">{{v.posiName}}</span>
                </div>
              </li>
              <div v-if="showEasyTip" class="loading"><i class="el-icon-loading"></i></div>
            </ul>
            <div class="noPeople" v-show="peopleCont">
              <span class="peopleIcon"><img src="../../../assets/img/tip_data.png" alt=""></span>
              <span class="peopleTip">暂无直属人员</span>
            </div>
          </el-card>
        </el-aside>
      </transition>
      <transition name="slide-fade">
        <section class="contacts-right-right rightml" style="padding: 0 0 0 10px;" v-show="employeesInfo">
          <el-card class="box-card el-card-flex">
            <div class="memInfoBlock">
              <div class="upper">
                <div class="imgRel">
                  <!-- <el-button class="img" icon="el-icon-user" circle></el-button> -->
                  <div class="img">{{this.basicInformation.empName}}</div>
                </div>
                <span>{{this.basicInformation.empName}}</span>
              </div>
              <div class="middle">
                <div class="optBtns">
                  <el-button type="primary" round>发邮件</el-button>
                  <el-button type="primary" round>发信息</el-button>
                  <el-button type="primary" round>发通知</el-button>
                </div>
              </div>
              <div class="bottom">
                <el-form :model="basicInformation" ref="basicInformation" label-width="100px" class="bottomWrap">
                  <el-form-item label="姓名:" prop="empName">
                    <el-col :span="18">
                      <p>{{this.basicInformation.empName}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="员工编号:" prop="empCode">
                    <el-col :span="18">
                      <p>{{this.basicInformation.empCode}}</p>
                    </el-col>
                  </el-form-item>
                  <!-- <el-form-item label="部门:" prop="userName">
                    <el-col :span="18">
                      <p>{{this.basicInformation.userName}}</p>
                    </el-col>
                  </el-form-item> -->
                  <el-form-item label="职务:" prop="positions" class="userPositions">
                    <el-col :span="28">
                      <span v-for="(v, i) in this.basicInformation.positions" :key="i">{{v.posiName}}  </span>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="办公地点:" prop="oaddress">
                    <el-col :span="18">
                      <p>{{this.basicInformation.oaddress}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="办公电话:" prop="otel">
                    <el-col :span="18">
                      <p>{{this.basicInformation.otel}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="移动电话:" prop="mobileNo">
                    <el-col :span="18">
                      <p>{{this.basicInformation.mobileNo}}</p>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="电子邮件:" prop="oemail">
                    <el-col :span="18">
                      <p>{{this.basicInformation.oemail}}</p>
                    </el-col>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-card>
        </section>
      </transition>
      <div class="rightBagImg" style="padding: 0 0 0 10px;" v-show="employeeBagImg">
        <div class="bagImg">
          <span class="imgSpan"><img src="../../../assets/img/down.png" alt=""></span>
          <span class="describeSpan">快速找人，高效沟通，多维度展示人员信息</span>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import {
  Tree,
  Dialog,
  Table,
  TableColumn,
  Pagination,
  MessageBox,
  Message,
  Tabs,
  TabPane,
  Calendar,
  Upload,
  Drawer
} from 'element-ui'
import Vue from 'vue'
import infiniteScroll from 'vue-infinite-scroll'
import { orgRoot, orgParent, orgSearch } from '@/api/library/enterpriseLibrary.js'
import { personnelList, personnelSearch } from '@/api/thematicPortal/mailList/mailList.js'
Vue.use(infiniteScroll)
export default {
  name: 'mailList',
  components: {
    'el-tree': Tree, // 树形菜单
    'el-dialog': Dialog, // 对话框
    'el-table': Table, // 表格
    'el-table-column': TableColumn, // 表格列
    'el-pagination': Pagination, // 分页
    'el-tabs': Tabs, // 标签
    'el-tab-pane': TabPane, // 标签页
    'el-calendar': Calendar, // 日历
    'el-upload': Upload, // 上传附件
    'el-drawer': Drawer // 抽屉弹框
  },
  data() {
    return {
      canEasyLoad: false, // 是否允许触发懒加载
      showEasyTip: false, // 是否懒加载的显示加载中...
      pageNum: 1, // 懒加载的页数
      pageSize: 15, // 懒加载的页数
      employeesData: [], // 懒加载的数据
      searchValue: '', // 树结构上的搜索
      defaultProps: {
        label: 'orgName',
        isLeaf: 'leaf'
      },
      basicInformation: {},
      employees: '', // 一进页面不显示员工
      employeesInfo: '', // 一进页面不显示员工信息详情
      peopleCont: true, // 一进页面不显示无员工提示
      peopleContList: false, // 一进页面不显示无员列表
      employeeBagImg: true, // 一进页面不显示员工信息详情背景图
      isFalse: '',
      classA: 'activePsn',
      keyTree: 1,
      employeesTree: [], // 树形结构搜索得到数据
      employeesPeople: [], // 得到人的列表
      orgId: "", // 树结构数据id
      treeExpandedKey: [],
      orgNames: '', // 获取员工标题
      treeShow: true, // 隐藏树数据
      peopleShow: false, // 隐藏人员数据
      positions: []
    }
  },
  created() {},
  watch: {
    searchValue (val) { // 树搜索
      if (val) {
        this.employees = false
        this.employeesInfo = false
        // this.employeeBagImg = false
        orgSearch(val).then(res => {
          this.deepChild(res.data.data)
          if (res.data.code == 10002) {
            document.getElementsByClassName("el-message")[0].remove() // 移除默认的提示
            this.employeeBagImg = true
          }
          this.employeesTree = res.data.data
          if (!this.employeesTree) {
            this.treeShow = false
            this.peopleShow = true
            personnelSearch({
              empName: val
            })
            .then(res => {
              if (res.data.code == 10000) {
                this.employeesPeople = res.data.data.records
                this.employeesPeople.forEach(e => {
                  e.positions = e.positionStr.split(',')
                  e.positionStr.split(',').forEach(v => {
                    let obj = {
                      posiName: v
                    }
                    e.positions.push(obj)
                  })
                })
              }
            }).catch(() => {this.employeeBagImg = true})
          }
        })
      } else {
        this.searchValue = ""
        this.treeShow = true
        this.peopleShow = false
        this.employeesInfo = false
        this.employeeBagImg = true
        this.keyTree += 1
      }
    }
  },
  methods: {
    activePsn (index, val) {
      console.log(val)
      this.isFalse = index
      this.employeesInfo = true
      this.employeeBagImg = false
      this.basicInformation = val
    },
    // 滚屏加载
    load () {
      if (!this.canEasyLoad) return
      this.canEasyLoad = false
      let nowOrgId = this.orgId
      personnelList(this.orgId, {
        page: ++this.pageNum,
        size: this.pageSize
      }).then(res => {
        if (nowOrgId != this.orgId) return
        let personalInfoData = res.data.data.records
        this.employeesData.push(...personalInfoData)
        // 如果发现数据量少于 pageSize , 说明数据少, 再也不用获取了
        if (personalInfoData.length < this.pageSize) {
          this.showEasyTip = false
          this.canEasyLoad = false
        } else this.canEasyLoad = true
      })
    },
    // 递归遍历树形数据源
    deepChild (val) {
      let $this = this
      if (val && Array.isArray(val) && val.length) {
        val.forEach(item => {
          if (typeof item === 'object') {
            item.orgId = item.id
            item.orgName = item.name
            $this.deepChild(item.children)
          }
        })
      }
    },
    loadMailNode (node, resolve) {
      if (node.level === 0) {
        orgRoot().then(res => {
          let partentData = res.data.data
          partentData.forEach(e => {
            e.leaf = e.isLeaf == 'y' ? true : false
          })
          resolve(partentData)
          this.orgId = partentData[0].orgId
          this.$refs.tree.setCurrentKey(this.orgId)
          this.treeExpandedKey = [this.orgId]
        }).catch(res => {
          resolve([])
        })
      } else {
        let id = node.data.orgId
        this.orgId = id
        orgParent(id).then(res => {
          // console.log(res)
          let childDatas = res.data.data.records
          childDatas.forEach(e => {
            e.leaf = e.isLeaf == 'y' ? true : false
          })
          resolve(childDatas)
        }).catch(res => {
          resolve([])
        })
      }
    },
    filterNode (value, data) { // 树状图
      if (!value) return true
      return data.orgName.indexOf(value) !== -1
    },
    // 点击数事件
    handleNodeClick (val) {
      console.log(val)
      this.pageNum = 1
      this.orgNames = val.orgName
      this.employees = true
      this.employeesInfo = false
      this.showEasyTip = false
      this.canEasyLoad = false
      this.employeesData = []
      // 获取一次懒加载的数据
      // let nowOrgId = val.orgId
      this.orgId = val.orgId
      personnelList(this.orgId, {
        page: this.pageNum,
        size: this.pageSize
      }).then(res => {
        // if (nowOrgId == this.orgId) return
        console.log(res)
        if (res.data.data.records && res.data.data.records.length > 0) {
          this.peopleCont = false
          this.peopleContList = true
        } else {
          this.peopleCont = true
          this.peopleContList = false
          this.employeeBagImg = true
        }
        let personalInfoData = res.data.data.records
        // 如果第一次获取数据, 发现数据量少于 pageSize , 说明数据少, 再也不用获取了
        if (personalInfoData.length >= this.pageSize) {
          this.showEasyTip = true
          this.canEasyLoad = true
          this.load()
        }
        this.employeesData = personalInfoData
      })
    }
  }
}
</script>
<style lang="scss" scope>
.mainCont {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  border-radius: 4px;
  // border: 1px solid #EBEEF5;
  // background-color: #FFF;
}
.contacts-right-mid {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  height: 100%;
  // background-color: #fff;
  overflow: auto;
  // border-right: 1px solid #eee;
  // border-bottom: 1px solid #eee;
  position: relative;
  z-index: 10;
  transition: width 1s,opacity 1s;
}
.contacts-right-mid .narrow {
  vertical-align: top;
  width: 220px;
  margin-left: -220px;
}
.asidePeople {
  position: relative;
  .noPeople {
    position: absolute;
    top: 40%;
    left: 100px;
    .peopleIcon {
      display: block;
      padding-left: 5px;
      img {
        width: 64px;
        height: 64px;
      }
    }
    .peopleTip {
      color: #9e9e9e;
      font-size: 12px;
      margin-top: 16px;
      display: block;
    }
  }
}
.contacts-right-right {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 100%;
  height: 100%;
  // background-color: #fff;
  overflow: auto;
  // border-right: 1px solid #eee;
  // border-bottom: 1px solid #eee;
  position: relative;
  z-index: 8;
  transition: width 1s,opacity 1s;
  .memInfoBlock {
    height: 100%;
    overflow: auto;
    font-size: 12px;
    .upper{
      margin: 30px 0 0;
      padding: 0;
      .imgRel{
        // width: 80px;
        // height: 80px;
        width: 100%;
        text-align: center;
        padding-bottom: 8px;
        .img{
          width: 80px;
          height: 80px;
          line-height: 80px;
          display: inline-block;
          border-radius: 50%;
          color: #ffffff;
          font-size: 14px;
          background-color: #81C684;
        }
        position: relative;
        margin: 0 auto;
      }
      span{
        display: block;
        font-size: 12px;
        color: #262626;
        font-size: 14px;
        text-align: center;
      }
    }
    .optBtns{
      margin-top: 5px;
      text-align: center;
    }
    .bottom{
      width: 300px;
      margin: 10px auto;
      .bottomWrap{
        margin-top: 10px;
      }
      .userPositions {
        width: 500px;
      }
    }
  }
}
.mid-panel {
  li {
    padding: 15px 10px 7px;
    font-size: 12px;
    color: #333333;
    // overflow: hidden;
    .user-avatar {
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 50%;
      color: #ffffff;
      background-color: #81C684;
    }
    .listRightPart {
      width: 200px;
      display: inline-block;
      padding-left: 10px;
      vertical-align: middle;
      .name{
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        color: #333333;
      }
      .dept{
        font-size: 12px;
        color: #9e9e9e;
      }
    }
    &:hover{
      cursor: pointer;
      background-color: #f7f7f7;
    }
  }
  .activePsn {
    background-color: #f7f7f7;
  }
  .loading {
    height: 20px;
    line-height: 20px;
    padding: 0 0 15px 100px;
  }
}
.rightBagImg {
  width: 100%;
  position: relative;
  height: 100%;
  z-index: 10;
  // background-color: #ffffff;
  .bagImg {
    position: absolute;
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    margin-left: -125px;
    margin-top: -125px;
    text-align: center;
    .describeSpan {
      color: #9e9e9e;
      font-size: 12px;
      margin-top: 86px;
      display: block;
    }
    .imgSpan {
      width: 100px;
      height: 75px;
      color: #9e9e9e;
      display: block;
      padding-left: 38px;
    }
  }
}
</style>
<style lang="scss">
  .mailContainer {
    .el-card__header {
      height: 44px;
      overflow: hidden;
      .orgNamesStyle {
        display: inline-block;
        width: 238px;
        color: #303133;
        font-size: 14px;
        // font-weight: normal;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
    }
  }
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(-200px);
    opacity: 0;
  }
</style>